<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>直播</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui2/aui.css" />
	<style>
	    body {}
	    .blank{
	    	display: block;
	    	height:250px;
	    	background-color: #fff;
	    }
	    #page1, #page2, #page3{
            position: relative; z-index:1000;
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-transition: all .4s;
            transition: all .4s;
            background-color: #fff;
        }
        #page1.out, #page2.out, #page3.out{
        	display:none;
        }
        .summary{
            text-indent: 10px;
        }
        .teacher-class{
            position:relative;
            display: block;
        }
        .teacher-class>span{
            display: block;
            width:180px;
            margin:0 auto;
            margin-top:20px;
            text-align:center;
            font-weight: bold;
            font-size:32px;
            border-bottom:1px solid #CCCCCC;
        }
        .join{
            border:none !important;
            height:80px;
        }
        .aui-list{
            border-top:none;
        }
        .aui-list .aui-list-item:active {
            background-color:#fff;
        }
        .aui-chat{ 
            padding:0.5rem;
        }
	</style>
</head>
<body>
	<div class="blank"></div>
	<section id="chatroom" class="aui-chat">
    </section>
    <script id="message_receive" type="text/x-dot-template">
        <div class="aui-chat-item aui-chat-left">
            <div class="aui-chat-media">
            	{{if(it.content.extra) { }}
                <img src={{=JSON.parse(it.content.extra).avatar}} />
                {{ } }}
            </div>
            <div class="aui-chat-inner">
            	{{ if(it.content.extra){ }}
                <div class="aui-chat-name">{{=JSON.parse(it.content.extra).nickname}}</div>
                {{ } }}
                <div class="aui-chat-content">
                    <div class="aui-chat-arrow"></div>
                    {{=it.content.text}}
                </div>
            </div>
        </div>
    </script>
    <script id="message_send" type="text/x-dot-template">
        <div class="aui-chat-item aui-chat-right">
            <div class="aui-chat-media">
            	{{if(it.content.extra) { }}
                <img src={{=JSON.parse(it.content.extra).avatar}} />
                {{ } }}
            </div>
            <div class="aui-chat-inner">
            	{{ if(it.content.extra){ }}
                <div class="aui-chat-name">{{=JSON.parse(it.content.extra).nickname}}</div>
                {{ } }}
                <div class="aui-chat-content">
                    <div class="aui-chat-arrow"></div>
                    {{=it.content.text}}
                </div>
            </div>
        </div>
    </script>
</body>
<script src="../../script/doT.min.js"></script>
<script data-main="../../script/main" src="../../script/require.js"></script>
<script type="text/javascript">
	var data;
	var index = 2;
	var rong;
	var extra;//用户信息，附加在每条消息后
	apiready = function(){
		require(["zepto","common"],function(){
			data = api.pageParam.data;
			var h = api.winWidth/16*9;
			$(".blank").css("height",h+"px");
			
			console.log(JSON.stringify(api.pageParam));
			rong = api.require('rongCloud2');
			initChatBox();
			initRongCloud();
			
			var obj = api.require('playModule');
			obj.play({
			    rect:
			    {    
			    	x : 0,
			        y : 0,
			        w : api.winWidth,
			        h : h
			    },
			    fixedOn: api.frameName,
			    fixed:true,
			    title: 'test',
			    url: data.play_url,
			    defaultBtn: true,
			    enableFull : false,
			    isTopView : false
			}, function(ret, err) {
			})
			
            
		})
	};
	
	function initChatBox(){
        var UIChatBox = api.require('UIChatBox');
        UIChatBox.open({
            placeholder: '',
            maxRows: 4,
            texts: {
                sendBtn: {
                    title: '发送'
                }
            },
            styles: {
                inputBar: {
                    borderColor: '#d9d9d9',
                    bgColor: '#f2f2f2'
                },
                inputBox: {
                    borderColor: '#B3B3B3',
                    bgColor: '#FFFFFF'
                },
                sendBtn: {
                    titleColor: '#4cc518',
                    bg: '#999999',
                    activeBg: '#46a91e',
                    titleSize: 14
                }
            }
        }, function(ret, err) {
            if(ret.eventType=="send"){
                UIChatBox.closeKeyboard();
                rong.sendTextMessage({
                    conversationType: 'CHATROOM',
                    targetId: data.chatroom,
                    text: ret.msg,
                    extra: extra
                }, function(ret, err) {
                    if(ret&&ret.status=="prepare"){
                        console.log(JSON.stringify(ret));
                        $("#chatroom").append(doT.template($("#message_send").text())(ret.result.message));
                        api.pageDown({bottom:true});
                    }
                });
            }
        });
	}
	
	function initRongCloud(){
        rong.setOnReceiveMessageListener(function(ret, err) {
            if(ret.result.message.senderUserId==userId){
            	$("#chatroom").append(doT.template($("#message_send").text())(ret.result.message));
            	setTimeout(function(){
            		api.pageDown({bottom:true});
            	},1000);
            }else{
            	$("#chatroom").append(doT.template($("#message_receive").text())(ret.result.message));
            	setTimeout(function(){
            		api.pageDown({bottom:true});
            	},1000);
            }
        })
        $zb.prefs.getPrefs('userInfo',function(ret){
            var push_token=JSON.parse(ret.value).push_token;
            var avatar = $zb.getRes(JSON.parse(ret.value).avatar);
            var nickname = JSON.parse(ret.value).nickname;
            var temp = {
                avatar:avatar,
                nickname:nickname
            }
            extra = JSON.stringify(temp);
            connectRongCloud(push_token)
        })
	}
	function connectRongCloud(push_token){
	    rong.connect({
            token: push_token
        },function(ret, err) {
            if (ret.status == 'success'){
                console.log(JSON.stringify(ret));
                userId = ret.result.userId;
                rong.joinChatRoom({
                    chatRoomId: data.chatroom,
                    defMessageCount: -1
                }, function(ret, err) {
                    if (ret.status == 'success'){
                        console.log(JSON.stringify(ret));
                    }else
                        api.toast({ msg: err.code });
                })
            }
        });
	}
</script>
</html>